<template>
  <section id="playerBar">
    <article id="left" class="hoverStyle">
      <img src="/public/playerBar/heijiao.png" alt="#" />
      <div>
        <p style="font-size: 14px" v-if="musicInfo.name == ''">歌曲名称</p>
        <p style="font-size: 14px" v-else>{{ musicInfo.name }}</p>
        <p style="font-size: 12px" v-if="musicInfo.singer == ''">歌手</p>
        <p style="font-size: 12px" v-else>{{ musicInfo.singer }}</p>
      </div>
    </article>
    <section id="middle">
      <div id="buttons">
        <img
          class="hoverStyle"
          src="/public/playerBar/logo-review.png"
          alt="上一首"
          style="height: 18px"
          @click="playEvent(1)"
        />
        <img
          class="hoverStyle"
          v-if="isPlaying == false"
          src="/public/playerBar/logo-play.png"
          alt="播放"
          style="height: 20px"
          @click="playEvent(2)"
        />
        <img
          class="hoverStyle"
          v-else
          src="/public/playerBar/logo-stop.png"
          alt="暂停"
          style="height: 20px"
          @click="playEvent(3)"
        />
        <img
          class="hoverStyle"
          src="/public/playerBar/logo-next.png"
          alt="下一首"
          style="height: 18px"
          @click="playEvent(4)"
        />
      </div>
      <div id="progress">
        <span>{{ musicInfo.currentTime }}</span>
        <el-slider
          class="el-slider"
          style="width: 80%"
          :min="0"
          :max="360"
          :show-tooltip="false"
          @change="SetPorgress"
          size="small"
          v-model="times.progress"
        />
        <span>{{ musicInfo.totalTime }}</span>
      </div>
    </section>
    <aside id="right">
      <div id="rightBox">
        <div class="rightArea hoverStyle">
          <img
            @click="loveEvent(1)"
            v-if="loveStatus == false"
            src="/public/playerBar/love-no.png"
            alt="未知"
          />
          <img @click="loveEvent(2)" v-else src="/public/playerBar/love-yes.png" alt="喜欢" />
        </div>
        <div class="rightArea hoverStyle">
          <img
            @click="loopEvent(1)"
            v-if="loopMethod == 0"
            src="/public/playerBar/loop-no.png"
            alt="顺序列表"
          />
          <img
            @click="loopEvent(2)"
            v-else-if="loopMethod == 1"
            src="/public/playerBar/loop.png"
            alt="循环列表"
          />
          <img @click="loopEvent(3)" v-else src="/public/playerBar/loop-one.png" alt="单曲循环" />
        </div>
        <el-popover :width="150" trigger="click">
          <template #reference>
            <div class="rightArea hoverStyle">
              <img v-if="volume != 0" src="/public/playerBar/volume-on.png" alt="音量" />
              <img v-else src="/public/playerBar/volume-off.png" alt="音量关" />
            </div>
          </template>
          <el-slider style="--el-slider-main-bg-color: #72dfd0" v-model="volume" />
        </el-popover>
        <div class="rightArea hoverStyle">
          <img @click="listEvent()" src="/public/playerBar/list.png" alt="播放列表" />
        </div>
        <MusicListDrawer />
      </div>
    </aside>
  </section>
</template>

<script setup>
import { ref, reactive } from 'vue'
import MusicListDrawer from '../drawer/MusicList.vue'

// 播放器Bar-右侧区域
const loveStatus = ref(false)
const loveEvent = (e) => {
  loveStatus.value = true ? e == 1 : (loveStatus.value = false)
}
const loopEvent = (e) => {
  if (e == 3) {
    loopMethod.value = 0
  } else {
    loopMethod.value = e
  }
}
const listEvent = () => {
  playList.drawerShow = true
}

// 播放器Bar-中间区域
import { musicPlayerStore } from '@/stores/musicPlayer'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus'

const store = musicPlayerStore()
const { isPlaying, loopMethod, volume } = storeToRefs(store)
const { Play, Pause, musicInfo, times, SetPorgress, playList } = store

const playEvent = (e) => {
  if (e == 1) {
    let index = playList.musicList.indexOf(musicInfo.origin)
    if (index != 0) {
      Play(playList.musicList[index - 1])
    } else {
      Play(playList.musicList[playList.musicList.length - 1])
    }
  }
  if (e == 2) {
    if (musicInfo.name == '') {
      ElMessage.warning('播放列表暂无音乐哦~')
    } else {
      Play('play')
    }
  }
  if (e == 3) {
    Pause()
  }
  if (e == 4) {
    let index = playList.musicList.indexOf(musicInfo.origin)
    if (index != playList.musicList.length - 1) {
      Play(playList.musicList[index + 1])
    } else {
      Play(playList.musicList[0])
    }
  }
}
</script>

<style scoped>
.hoverStyle {
  cursor: pointer;
}

#right {
  width: 30%;
}

#rightBox {
  margin-right: 20%;
  display: flex;
  justify-content: space-evenly;
}

.rightArea > img {
  height: 20px;
}

#middle {
  width: 44%;
  height: 50px;
}

#buttons {
  height: 34px;
  padding: 0 15% 0 15%;
  margin: 0 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.el-slider {
  --el-slider-button-size: 12px;
  --el-slider-main-bg-color: white;
}

#progress {
  /* width: 80%; */
  height: 16px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 8px;
}

#left > img {
  height: 36px;
  margin-right: 5px;
}

#left {
  width: 26%;
  display: flex;
  justify-content: center;
  transform: translateX(6%);
}

#playerBar {
  height: 50px;
  width: 100%;
  background-color: #72dfd0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  color: white;
  /* padding-left: 5%; */
}
</style>
